<template>
    <div>
        <hr>
        <h2>unocss 的基本使用</h2>
        <div>123456</div>
        <button class="bg-blue w-80 h-10 ml-10 m-1">
            写法1 class
        </button>
        <button w="80" h="10" bg="pink" text="#bfa">
            写法2
        </button>
        <button bg-blue w-80 h-10 ml-10 m-1>
            写法3
        </button>

        <div  w-200 h-160 bg-gray font-bold border-solid border-l-10 border-red rounded-5  >
            <div>
                <div class="text-#bfa text-32px"> 123456 </div>
            </div>
        </div>
    </div>
</template>

<script>
    // https://unocss.dev/interactive/?s=border 交互式文档地址
    export default {
        name: "Unocss"
    }
</script>
<style scoped></style>
<!--


        w-200 w-full
        h-160 h-full
        class="text-#bfa" text-32 px rem

        bg-gray
        font-bold
        border-solid
        border-10
        border-l-10
        border-l-solid
        border-l-red
        border-red
        rounded-5 （圆角）lg sm  rd-5px

        absolute top-0 left-0 right-0 bottom-0 opacity-0
        overflow-hidden
        relative

        flex
        flex-col || raw
        items-center
        justify-center
        flex-justify-end
        flex-nowrap  flex-wrap
        flex-self-end
        flex-self-start
        flex-1
        flex-grow-1

        text-center

        p-3{
            padding: 1.5rem;
        }
        .pt-6 {
            padding-top: 1.5rem;
        }
        .px-4 {
            padding-left: 1rem;
            padding-right: 1rem;
        }
        .py-4

        .pb-3 {
            padding-bottom: 0.75rem;
        }
        p=>m margin

        // bg-[url(xxxx)]
        background-image: url(xxxx);

        // bg-center
        background-position: center;

        // bg-no-repeat
        background-repeat: no-repeat;

        // bg-#ffffff
        background-color: rgb(255 255 255);

        // from-#8166F6 to-#B4A5F7 bg-gradient-to-r
        background: linear-gradient(to right, #8166F6 , #B4A5F7 );

        .max-h-80vh {
          max-height: 80vh;
        }
        class="break-all"
        overflow-hidden text-ellipsis whitespace-nowrap
-->

